<!--
  *@Description : Cos吧组件
  *@author 萧红
  *@date 2020-03-22 18:26
  *@LastEditTime 2020-03-22 18:26
  *@LastEdititors
-->
<template>
    <div id="cosBa">
      <Tittle :title="cosbaName"></Tittle>
      <div :style="{height:$inerHeight + 55 + 'px'}">
        <cube-sticky :pos="scrollY" fixed-show-ani="sticky-fixed-show">
          <cube-scroll :options="{pullDownRefresh: false, pullUpLoad: this.pullUpLoadObj,probeType: 1}" @pulling-up="onPullingUp"
            ref="scroll" :data="dongTaiData" :scroll-events="['scroll-end']"   @scroll-end="scrollHandler"
          >
          <div class="cos-top" :style="{backgroundImage: `url(${defaultBg})`}">
          <div class="cosba-info">
            <div class="avatar" :style="{backgroundImage: `url(${defaultBg})`}">
            </div>
            <div class="center">
              <div class="name">{{cosbaName}}</div>
              <div class="data-info">
                <span>9163人关注 丨 </span>
                <span>17176条关注</span>
              </div>
            </div>
            <div class="right">
              <div class="guanzhu-btn">
                关注
              </div>
            </div>
          </div>
          <div class="bottom">
            关注{{cosbaName}}吧就可以在动态里面查看到哦
          </div>
        </div>
          <!--最热最新-->
            <cube-sticky-ele>
              <div class="nav">
                <div>
                  <span class="selected" @click="changeNav">发布</span>
                </div>
                <div>
                  <span @click="changeNav">赞过</span>
                </div>
              </div>
            </cube-sticky-ele>
            <div class="mode" v-for="(mData,mindex) in dongTaiData" :key="mindex">
              <!--个人信息区域-->
              <Info :info="mData.info" :inGuanZhu="mData.inGuanZhu" @changeInGuanZhu="(state)=>mData.inGuanZhu=state"></Info>
              <!--文本区域-->
              <div class="text" v-if="mData.content.length>0"  @click="goDetail(mData)">
                <pre>{{mData.content}}</pre>
                <!--{{mData.content}}-->
              </div>
              <!--多张图片区域-->
              <div class="view" v-if="mData.type==='image'"  @click.self="goDetail(mData)">
                <img-area :imgFileList="mData.urls"></img-area>
                <!--<img :src="imgItem"  alt="" v-for="(imgItem, mindex) in mData.imgs" :key="imgItem" @click="handleImgsClick(mData.imgs, mindex)"/>-->
              </div>
              <!--视频区域-->
              <div class="video" v-if="mData.type==='video'">
                <my-video :vedio-url="mData.urls[0]" :index="mData.videoIndex!==-1?mData.videoIndex:''" :poster="mData.urls[1]"></my-video>
              </div>
              <!--标签区域-->
              <div class="label">
                <div v-for="label in mData.labels" :key="label" @click="toNewPage({path:'/cosba', query:{name:label}})">{{label}}</div>
              </div>
              <!--用户交互区域-->
              <div class="action">
                <!--点赞-->
                <div @click="dianzan(mData)">
                  <span class="iconfont icondamuzhi" :class="{'selected': mData.indianzan}"></span>
                  <span class="number">{{mData.dianzan}}</span>
                </div>
                <!--评论-->
                <div @click="goDetail(mData)">
                  <span class="iconfont iconxiaoxi1"></span>
                  <span class="number">{{mData.pinglun}}</span>
                </div>
                <!--收藏-->
                <div @click="shouChang(mData)">
                  <span class="iconfont iconshoucang" :class="{'selected':mData.inshouchang}"></span>
                  <span class="number">{{mData.shoucang}}</span>
                </div>
              </div>
            </div>
          </cube-scroll>
        </cube-sticky>
      </div>
    </div>
</template>

<script>
import Tittle from '../../components/Tittle'
import imgArea from '../../components/imgArea'
import Info from '../../components/Info'
import MyVideo from '../../components/MyVideo'
import {PullDownRefreshAndPullUpLoad} from '../../common/js/mixins'
export default {
  name: 'CosBa',
  components: {
    Tittle,
    imgArea,
    Info,
    MyVideo
  },
  mixins: [PullDownRefreshAndPullUpLoad],
  data () {
    return {
      scrollY: 0,
      cosbaName: '', // cos吧名字
      defaultBg: '', // 默认背景和图像
      // scene: 'hot', // 是最热还是最新
      scene: 'recommend', // 是最热还是最新
      dongTaiData: []
    }
  },
  mounted () {
    this.cosbaName = this.$route.query.name
    this.defaultBg = '../../../static/cosBaBg.jpg'
    this.getData()
  },
  methods: {
    getData () {
      let params = {
        userId: localStorage.getItem('userId'),
        page: this.page,
        scene: this.scene
      }
      this.apis.getRecommendData(params).then((res) => {
        this.dongTaiData = res.data
        this.index = 0
        this.dongTaiData.forEach((item) => {
          if (item.type === 'video') {
            item.videoIndex = this.index // 保存视频的index
            this.index++
          } else {
            item.videoIndex = -1
          }
        })
        this.$toast('加载成功', 'correct', 1000)
      })
    },
    scrollHandler ({y}) {
      this.scrollY = -y
    },
    changeNav (e) {
      this.page = 1 // 页数初始化为第一页
      // this.dongTaiData = [] // 清空数据让视图更着变化
      let current = e.currentTarget
      // 单击了已经选中的导航栏，就不请求后台了
      if (current.classList.contains('selected')) {
        return false
      }
      let navs = document.querySelectorAll('.nav span')
      for (let i = 0; i < navs.length; i++) {
        navs[i].classList.remove('selected')
      }
      current.classList.add('selected')
      if (this.scene === 'recommend') {
        this.scene = 'guanzhu'
      } else { this.scene = 'recommend' }
      // let params = {
      //   page: this.page,
      //   userId: this.$route.query.userId,
      //   scene: this.scene
      // }
      this.$toast('正在加载中', 'loading', 5000)
      this.getData()
    },
    onPullingUp () {
      this.page++
      let params = {
        userId: localStorage.getItem('userId'),
        page: this.page,
        scene: this.scene
      }
      this.apis.getRecommendData(params).then((res) => {
        if (res.data.length === 0) {
          this.$refs.scroll.forceUpdate()
        } else {
          res.data.forEach((item) => {
            if (item.type === 'video') {
              item.videoIndex = this.index // 保存视频的index
              this.index++
            } else {
              item.videoIndex = -1
            }
          })
          this.data = this.data.concat(res.data)
        }
        // this.$refs.scroll.refresh()
        // console.log(this.data)
      })
    }
  }
}
</script>

<style scoped lang="stylus">
  @import "../../../node_modules/stylus-px2rem"
#cosBa
{
  .cos-top
  {
      width: 100%
      height: 75px
      position relative
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      .cosba-info
      {
        width 100%
        height 37.5px
        position absolute
        top: 0
        bottom: 0
        margin auto
        z-index 1
        padding 0px 5px
        display flex
        flex-flow row nowrap
        align-items center
        .avatar
        {
          width 25px
          height: 25px
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
        }
        .center
        {
          text-align left
          color snow
          display flex
          flex-flow column nowrap
          justify-content space-around
          margin-left 5px
          position relative
          .name
          {
            width 100%
            height 10px
            line-height 10px
          }
          .data-info
          {
            width 100%
            height 10px
            line-height 10px
          }
        }
        .right
        {
          width 50px
          position absolute
          right 5px
          .guanzhu-btn
          {
            width 25px
            margin 0px auto
            height 12px
            line-height 12px
            background-color white
            color: #ff74a3
          }
        }
      }
      .bottom
      {
        width 100%
        padding 0px 5px
        text-align left
        color snow
        font-weight bolder
        letter-spacing 2px
        background-color rgba(0, 0, 0, 0.65)
        height: 20px
        line-height 20px
        position: absolute
        bottom: 0
        z-index 1
      }
  }
  .cos-top:after
  {
    content: "";
    width: 100%;
    height: 75px;
    position: absolute;
    left: 0;
    top: 0;
    background: inherit;
    -webkit-filter: blur(3px);
    filter: blur(3px);
    z-index: 0;
  }
  .nav
  {
    width 100%
    height 25px
    line-height 25px
    display flex
    background-color white
    border-bottom 6px solid #f0f0f0
    div
    {
      width: 50%
      span
      {
        padding 0px 10px
        display inline-block
        height 25px
        line-height 30px
        font-size 7px
        font-weight bolder
        box-sizing border-box
      }
      .selected
      {
        color #ff689b
        border-bottom 1.2px solid #ff689b
      }
    }
  }
  .mode
  {
    padding 2px 2px;
    border-bottom 3px solid #f0f0f0
    .text
    {
      width 100%
      padding 2px 2px;
      display inline-block
      pre {
        line-height 10px
        text-align left;
        font-family 'Avenir', Helvetica, Arial, sans-serif
      }
    }
    .view,.video{
    }
    .label
    {
      display flex
      flex-direction row
      justify-content flex-start
      padding 2px 1.3px;
      div
      {
        display inline
        margin 2px
        padding 0px 2px
        height 10px;
        line-height 10px;
        background #fff1f1;
        color:deeppink;
      }
    }
    .action
    {
      width 100%;
      display grid
      height:15px
      padding 2px 2px
      grid-template-columns repeat(3,25%)
      grid-column-gap 12%
      .selected
      {
        color #ff4466
      }
      span{
        font-size 10px
        height:15px;
        line-height 15px;
        color:#ccc;
      }
      .number
      {
        font-size: 8px
        padding 0px 2px
      }
      border-top 1px solid #eee
    }
  }
}
  .sticky-fixed-show-enter, .sticky-fixed-show-leave-active
  {
    transform: translate(0, -100%)
  }
  .sticky-fixed-show-enter-active,.sticky-fixed-show-leave-active
  {transition: all .5s ease-in-out}
</style>
